<div>
  <div class="form-group schema-form-{{form.type}} {{form.htmlClass}}"
       ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">
    <label class="control-label {{form.labelHtmlClass}}" ng-class="{required: form.required, 'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>

    <div class="{{form.fieldWrapperHtmlClass}}">
      <input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
             ng-show="form.key"
             type="{{form.type}}"
             step="any"
             sf-changed="form"
             placeholder="{{form.placeholder}}"
             class="form-control {{form.fieldHtmlClass}}"
             id="{{form.key.slice(-1)[0]}}"
             sf-field-model
             ng-disabled="form.readonly"
             ng-required="form.required"
             schema-validate="form"
             name="{{form.key.slice(-1)[0]}}"
             aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">

      <div ng-if="form.fieldAddonLeft || form.fieldAddonRight"
           ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
        <span ng-if="form.fieldAddonLeft"
              class="input-group-addon"
              ng-bind-html="form.fieldAddonLeft"></span>
        <input ng-show="form.key"
               type="{{form.type}}"
               step="any"
               sf-changed="form"
               placeholder="{{form.placeholder}}"
               class="form-control {{form.fieldHtmlClass}}"
               id="{{form.key.slice(-1)[0]}}"
               sf-field-model
               ng-disabled="form.readonly"
               schema-validate="form"
               name="{{form.key.slice(-1)[0]}}"
               aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">

        <span ng-if="form.fieldAddonRight"
              class="input-group-addon"
              ng-bind-html="form.fieldAddonRight"></span>
      </div>

      <span ng-if="form.feedback !== false"
            class="form-control-feedback"
            ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"
            aria-hidden="true"></span>

      <span ng-if="hasError() || hasSuccess()"
            id="{{form.key.slice(-1)[0] + 'Status'}}"
            class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>

      <div class="help-block" sf-message="form.description"></div>
    </div>
  </div>
  <div ng-if="form.type === 'password'" class="form-group {{form.htmlClass}}">
    <label class="control-label {{form.labelHtmlClass}}" ng-class="{required: form.required, 'sr-only': !showTitle()}" for="retype-{{form.key.slice(-1)[0]}}">Retype {{form.title}}</label>
    <input type="password"
           id="retype-{{form.key.slice(-1)[0]}}"
           name="retype-{{form.key.slice(-1)[0]}}"
           ng-blur="retypePasswordBlurred = true"
           ng-model="retypePassword"
           ng-required="ngModel.$modelValue && !form.readonly && !ngModel.$pristine"
           ng-disabled="form.readonly || ngModel.$pristine"
           ng-pattern="ngModel.$modelValue | escapeRegExp"
           class="form-control {{form.fieldHtmlClass}}">
    <div class="has-error" ng-if="retypePasswordBlurred && !form.readonly && !ngModel.$pristine && (retypePassword || '') !== (ngModel.$modelValue || '')">
      <span class="help-block">{{form.title}} values don't match.</span>
    </div>
  </div>
</div>
